<template>
  <div >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="项目名称">

        <el-select v-model="optionValue" @change='optionChange' placeholder="请选择">
          <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label"
            >
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>

        <el-button class="addButton" type="primary" @click="addProject('add')">添加项目</el-button>
        <el-button class="addButton" type="primary" @click="addProject('update')">修改项目名</el-button>
        <el-button class="addButton" type="primary" @click="deleteProject()">删除项目</el-button>
        <slot></slot>
      </el-form-item>
      <el-form-item label="">
      
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: ['tableName'],
  data(){
    return{
      objectId:'',
      form:{
      },
      options: [{
        label: '我的项目',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        label: '分享给我的项目',
        options: []
      }],

      optionValue: '',

    }
  },
  created(){
    this.get()
  },
  methods: {
      addProject(isType = 'add'){
        this.$prompt('请输入项目名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
          inputErrorMessage: '项目名称不能为空'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的项目名称是: ' + value
          });
          if (isType == 'add') {
            this.$emit('addFun',value,null)
            setTimeout(()=> {
              this.get('add')
            },1000)
          }
          if (isType == 'update' && this.optionValue) {
            this.$Leancloud.dataRequest.update(this.optionValue,{
              name:value,
              openid:this.$store.getters.openid
            },this.tableName,this)
            setTimeout(()=> {
              this.get('update')
            },1000)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      get(isType){
        let pageObj = {
          page:1,
          pageSize:1000,
          openid:this.$store.getters.openid
        }
        this.$Leancloud.dataRequest.getPage(pageObj,this.tableName).then((res)=> {
          if (res.list[0]) {
            console.log('我的项目',res.list)
            // ---- 下拉选择 -----
            let optionsList = []
            res.list.forEach(element => {
              optionsList.push({
                value: element.id,
                label: element.attributes.name
              })
            });
            console.log(optionsList)
            this.options[0].options = optionsList
            this.optionValue = optionsList[0].value
            // ---- 下拉选择 -----
            if (isType == 'delete') {
              this.$emit('tableGet',optionsList[0].value)
            }
            if (isType == 'add') {
              this.optionValue = optionsList[optionsList.length - 1].value
            }
          } 
        })
    },
    optionChange(value){
      // this.get(value)
      this.$emit('tableGet',value)
    },
    deleteProject(){
       this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Leancloud.dataRequest.deleteFun(this.optionValue,this.tableName)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          setTimeout(() => {
            this.get('delete')
          }, 1000);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
}
</script>

<style scoped>
  .addButton{
    margin-left: 20px;
  }
</style>
